/*
 * @Author: Yuelei 
 * @Date: 2018-03-19 13:45:57 
 * @Last Modified by: Yuelei
 * @Last Modified time: 2018-03-21 21:33:18
 */
import React         from 'react';
import { Link }      from 'react-router-dom';

import './index.scss';
import PageTitle     from 'component/page-title/index.jsx';

import MUtil         from 'util/mm.jsx';
import Statistic     from 'service/statistic-service.jsx'

const _mm        =   new MUtil;
const _statistic =   new Statistic;
// 定义Home组件
class Home extends React.Component{
    constructor(props){
        super(props);
        this.state={
            userCount:'-',
            productCount:'-',
            orderCount:'-'
        }
    }
    componentDidMount(){
      this.loadCount();
      
    }
    // 请求接口
    loadCount(){
      _statistic.getHomeCount().then(res=>{
        this.setState(res);
      },errMsg=>{
        _mm.errorTips(errMsg);
        })

    }
    render(){
        return(
          
           
            <div id="page-wrapper">
           
            <PageTitle title='首页'>
            
            </PageTitle>
               <div className="row">
                 <div className="col-md-4">
                    <Link to="/user" className='color-box brown'>
                      <p className='count'>{this.state.userCount}</p>
                      <p className='desc'>
                        <i className="fa fa-user-o"></i>
                        <span>用户数</span>
                      </p>
                    </Link>
                 </div>
                 <div className="col-md-4">
                    <Link to="/product"  className='color-box green'>
                      <p className='count'>{this.state.productCount}</p>
                      <p className='desc'>
                        <i className="fa fa-list"></i>
                        <span>商品数</span>
                      </p>
                    </Link>
                 </div>
                 <div className="col-md-4">
                    <Link to="/order"  className='color-box brown'>
                      <p className='count'>{this.state.orderCount}</p>
                      <p className='desc'>
                        <i className="fa fa-check-square-o"></i>
                        <span>订单数</span>
                      </p>
                    </Link>
                 </div>
               </div>
            </div>

           

        );
    }
}

export default Home; 